<template>
  <div v-if="item" class="transition  ease-in-out  hover:shadow"
       :class="['item-box-invent', 'w-full', 'h-full', item.bgc]" >
    <div class="iconfont-box bgc-one">
      <div class="iconfont-box-tow bgc-tow">
        <div class="iconfont-box-three bgc-three">
          <i :class="['iconfont',item.iconfont]" style="color: #ffffff"></i>
        </div>
      </div>
    </div>
    <div class="content">
      <span class="title block text-slate-600 leading-8">{{ item.title }}</span>
      <span class="num font-bold font-mono">{{ item.num }}</span>
      <span style="font-size: 13px;padding-left: 10px">{{ item.unit }}</span>
    </div>
    <div class="chart-container">
      <v-chart ref="currentRef"/>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref, nextTick,reactive } from 'vue'
import { getInventroy } from '@/api/warehouse/warehouseApi'
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  index: {
    type: Number,
    default: 0
  },
})

// 创建一个单独的 ref 来存储当前图表实例
const currentRef = ref(null)

let data = reactive([
  {
    title: 'PVC库存总数',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  },
  {
    title: '成品库存总数',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  },
  {
    title: '订单需求总数',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  },
  {
    title: 'LVT库存总数',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  },
  {
    title: '贴合板库存总数',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  },
  {
    title: '订单数量',
    value: 0,
    itemStyle: { color: '#81e8ac' }
  }
])

const renderOption = () => {
  let newList = data.map(dat => {
    // 创建一个新的对象，避免直接修改原始数据
    const newDat = { ...dat }
    // 根据条件设置颜色
    if (newDat.value == props.item.num) {
      newDat.itemStyle = { color: props.item.color2 } // 设置特定颜色
    } else {
      newDat.itemStyle = { color: props.item.color }  // 设置默认颜色
    }
    return newDat // 返回新的数据项
  })


  return {
    xAxis: {
      type: 'category',
      axisLine: { show: false },
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false }
    },
    series: [
      {
        data: newList,
        type: 'bar'
      }
    ]
  }
}

onMounted(async () => {
  await nextTick() // 等待 DOM 更新
  // await  getInventroyInfo()
  // console.log(currentRef.value,'======') // 检查是否有图表实例
  if (currentRef.value) {
    currentRef.value.setOption(renderOption())
  }
  // console.log(props.item, 'item-------') // 检查是否有图表实例
})


</script>

<style scoped lang="scss">
.item-box-invent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 20px;
  padding: 0 10px;

  .iconfont-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 60px;

    .iconfont-box-tow {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 50px;
    }

    .iconfont-box-three {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      line-height: 40px;
      justify-content: center;
      align-items: center;
    }

    .iconfont {
      font-size: 26px;
    }
  }

  .content {
    // width: 112px;
    text-align: center;

    .title {
      font-size: 16px;
    }

    .num {
      font-size: 20px;
      margin-top: 16px;
    }
  }

  .chart-container {
    width: 90px;
    height: 80px;
  }

}

.bgc1, .bgc4 {
  background: linear-gradient(
      90deg,
      rgba(6, 92, 220, 0.32) 20%,
      rgba(92, 165, 237, 0.1) 100%
  );

  .bgc-one {
    background-color: #7babef;

    .bgc-tow {
      background-color: #227fea
    }

    .bgc-three {
      background-color: #116ee3
    }
  }
}

.bgc2, .bgc5 {
  background: linear-gradient(
      90deg,
      rgba(40, 195, 230, 0.35) 20%,
      rgba(83, 214, 218, 0.14) 100%
  );

  .bgc-one {
    background-color: #9bd0dd;

    .bgc-tow {
      background-color: #7bb2c1;
    }

    .bgc-three {
      background-color: #5f909c;
    }
  }
}

.bgc3, .bgc6 {
  background: linear-gradient(
      90deg,
      rgba(255, 118, 0, 0.32) 20%,
      rgba(244, 143, 66, 0.1) 100%
  );

  .bgc-one {
    background-color: #ffc873;

    .bgc-tow {
      background-color: #ffb61f;
    }

    .bgc-three {
      background-color: #ff9a35;
    }
  }
}
.bgc4, .bgc6 {
  background: linear-gradient(
      90deg,
      rgba(0, 255, 21, 0.32) 20%,
      rgba(66, 244, 96, 0.1) 100%
  );

  .bgc-one {
    background-color: #adffc4;

    .bgc-tow {
      background-color: #5eff1f;
    }

    .bgc-three {
      background-color: #31ff91;
    }
  }
}

</style>
